<template>
  <div class="ribbon-block" @mouseenter="isHover = true" @mouseleave="isHover = false">
    <div class="ribbon-block__wrapper" :class="[modelValue?.data?.title || modelValue?.data?.subTitle || modelValue?.data?.description ? 'has-text' : '']">
      <div class="ribbon-block__bg" v-if="modelValue?.data?.title || modelValue?.data?.subTitle || modelValue?.data?.description">
        <div class="ribbon-block__title" v-html="modelValue?.data?.title"></div>
        <div class="ribbon-block__text" v-html="modelValue?.data?.subTitle"></div>  
        <div class="ribbon-block__description" v-html="modelValue?.data?.description"></div>
        <div class="ribbon-block__space"></div>
      </div>
      <div class="ribbon-block__img"></div>
    </div>

    <Operate v-if="!isPreview" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy" @handle-paste="handlePaste"></Operate>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script lang="ts" setup> 
import { ref } from 'vue'
import { randomString } from '@/utils/common'
import Operate from '@/common/Operate/index.vue'
import Setting from './setting.vue'


// 定义组件名称
defineOptions({
  name: 'RibbonBlock'
})

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy', 'handlePaste'])

const handleInit = () => {
  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: 'RibbonBlock',
    data: {
      title: '<p>家乐福放假啊飞机阿飞</p>',
      subTitle: '<p>飞机阿飞垃圾<strong>费垃圾费啦</strong></p>',
      description: '<p>发了疯<strong>哈符号佛啊复印件发就</strong>发拉法基垃<em>圾发啦激发发货单</em>号佛佛啊发货哦地哦ID和放大后f爱</p>',
    }
  }
  emit('update:modelValue', data)
} 

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit('handleDelete', props.modelValue.id)
}

const handleCopy = () => {
  emit('handleCopy', props.modelValue)
}

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

handleInit()
</script>

<style lang="scss" scoped>
.ribbon-block { 
  position: relative;
  overflow: hidden;
  // pointer-events: none;
}

.ribbon-block__wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 28.4375%;
  margin: -30px auto -6.1718%;
}

.ribbon-block__wrapper.has-text {
  height: auto;
  margin-top: 0;
  padding-bottom: 0;
  background: linear-gradient(180deg,#032b86,#032b86 80%,transparent 0);
}

.ribbon-block__wrapper.has-text .ribbon-block__bg {
  display: block;
  height: auto;
  padding-bottom: 0;
  min-height: clamp(31.5%,(100vw - 1280px)/-182.857 + 35%,35%);
}

.ribbon-block__wrapper.has-text .ribbon-block__img {
  background-image: url();
  background-position: bottom;
  height: 33vw;
  transform: translateY(16vw);
  top: unset;
  bottom: 0;
}

@media(min-width: 1920px) {
  .ribbon-block__wrapper.has-text .ribbon-block__img {
    transform:translateY(16vw);
  }
}

.ribbon-block__wrapper.has-text .ribbon-block__space {
  padding-bottom: clamp(50px,(100vw - 320px)/4.48 + 50px,300px);
}

@media(min-width: 1440px) {
  .ribbon-block__wrapper.has-text .ribbon-block__space {
    padding-bottom:clamp(300px,(100vw - 1440px)/11.2 + 300px,400px);
  }
}

.ribbon-block__bg {
  display: none;
  width: 100%;
  height: 0;
  padding-bottom: clamp(31.5%,(100vw - 1280px)/-182.857 + 35%,35%);
  display: block;
  background-image: url();
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom;
}

@media(max-width: 1279.98px) {
  .ribbon-block__bg {
    padding-bottom: 37%;
  }
}

@media(max-width: 767.98px) {
  .ribbon-block__bg {
    padding-bottom: clamp(35%,(100vw - 320px)/-26.353 + 52%,52%);
  }
}

.ribbon-block__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url();
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 50%;
}

.ribbon-block__description,.ribbon-block__description *,.ribbon-block__text,.ribbon-block__text *,.ribbon-block__title,.ribbon-block__title * {
  color: #fff;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  pointer-events: visible;
}

.ribbon-block__title {
  margin-bottom: 4px;
  padding-top: clamp(68px,(100vw - 1280px)/18.286 + 68px,103px);
}

@media(max-width: 1023.98px) {
  .ribbon-block__title {
        margin-bottom: 7px;
  }
}

@media(max-width: 767.98px) {
  .ribbon-block__title {
    padding-top: 36px;
  }
}

.ribbon-block__title,.ribbon-block__title * {
  font-size: 50px;
}

@media(max-width: 1023.98px) {
  .ribbon-block__title,.ribbon-block__title * {
    font-size:26px;
    font-weight: 700;
    line-height: 1.69;
    letter-spacing: .1em;
  }
}

@media(max-width: 1023.98px)and (max-width:1023.98px) {
  .ribbon-block__title,.ribbon-block__title * {
    font-size: 24px;
    line-height: 1;
  }
}

@media(max-width: 1023.98px)and (max-width:767.98px) {
  .ribbon-block__title,.ribbon-block__title * {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: .08em;
  }
}

@media(max-width: 767.98px) {
  .ribbon-block__text {
    margin: 0 auto;
  }
}

@media(max-width: 575.98px) {
  .ribbon-block__text {
    max-width: 190px;
  }
}

.ribbon-block__text,.ribbon-block__text * {
  font-size: 20px;
}

@media(max-width: 767.98px) {
  .ribbon-block__text,.ribbon-block__text * {
    font-size: 13px;
    line-height: 1.54;
  }
}

.ribbon-block__description {
  margin: 24px auto 0;
  max-width: min(952px,100% - 64px);
}

@media(min-width: 1280px) {
  .ribbon-block__description {
    max-width: clamp(952px,(100vw - 1280px)/1.311 + 952px,1440px);
  }
}

@media(max-width: 767.98px) {
  .ribbon-block__description {
    margin:0 auto;
  }
}

@media(max-width: 575.98px) {
  .ribbon-block__description {
    max-width: calc(100% - 24px);
  }
}

.ribbon-block__description,.ribbon-block__description * {
  font-size: 20px;
  font-weight: 400;
}

@media(max-width: 767.98px) {
  .ribbon-block__description,.ribbon-block__description * {
    font-size: 13px;
    line-height: 1.54;
  }
}
</style>